<template>
	<view class="wrap">

		<view class="logo">猛男健身APP</view>

		<!-- 用户名、手机登陆 -->
		<div>
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="onClickItem"></u-tabs>

			<!-- 用户名登陆 -->
			<view v-if="current === 0">
				<!-- 输入框 -->
				<view class="list">
					<!-- 用户名 -->
					<view class="list-call">
						<view class="iconfont icon-avatar" style="font-size: 22px;color:#5473e8;" />
						<input class="u-input" type="text" v-model="username" maxlength="16" placeholder="请输入账号"
							value="admin" />
					</view>
					<!-- 密码 -->
					<view class="list-call">
						<view class="iconfont icon-key" style="font-size: 22px;color:#5473e8;" />
						<input class="u-input" type="text" v-model="password" maxlength="32" placeholder="请输入密码"
							:password="!showPassword" value="admin123" />
						<image class="u-icon-right"
							:src="'/static/aidex/login/eye_' + (showPassword ? 'open' : 'close') + '.png'"
							@click="showPass()"></image>
					</view>
					<!-- 记住、忘记密码 -->
					<div style="padding:15rpx 0 0;">
						<view class="register">
							<navigator class="register-link" url="forget" open-type="navigate">忘记密码</navigator>
						</view>
						<u-checkbox v-model="remember" active-color="#5473e8">自动登录</u-checkbox>
					</div>
				</view>
				<!-- 登录按钮 -->
				<view class="button" @click="submit()"><text>登 录</text></view>
				<!-- 第三方登录 -->
				<view class="login-bottom-box">
					<u-divider> 更多登录方式 </u-divider>
					<view class="oauth2">
						<!-- 微信 -->
						<u-icon class="u-icon" size="100" color="#36c956" name="weixin-circle-fill" @click="wxLogin">
						</u-icon>
						<!-- QQ -->
						<u-icon class="u-icon" size="100" color="#23a0f0" name="qq-circle-fill" @click="qqLogin">
						</u-icon>
					</view>
					<view class="copyright">
						登录即代表您已阅读并同意<u-link href="#">用户协议</u-link> 与 <u-link href="#">隐私政策</u-link>
					</view>
				</view>
			</view>

			<!-- 手机号登陆 -->
			<view v-if="current === 1">
				<view class="list">
					<view class="list-call">
						<view class="iconfont icon-shouji" style="font-size: 22px;color:#5473e8;" />
						<u-field v-model="phoneNo" label="+86" placeholder="请填写手机号" style="width: 100%;"
							:border-bottom="false">
						</u-field>
					</view>
					<div style="padding:25rpx 0 0;">
						还没有账号？
						<navigator class="reg-link" url="reg" open-type="navigate">注册账号</navigator>
					</div>
				</view>
				<view class="button" @click="nextStep()"><text>下一步</text></view>
				<view class="login-bottom-box">
					<u-divider> 更多登录方式 </u-divider>
					<view class="oauth2">
						<u-icon class="u-icon" size="100" color="#36c956" name="weixin-circle-fill" @click="wxLogin">
						</u-icon>
						<u-icon class="u-icon" size="100" color="#23a0f0" name="qq-circle-fill" @click="qqLogin">
						</u-icon>
					</view>
					<view class="copyright">
						登录即代表您已阅读并同意<u-link href="#">用户协议</u-link> 与 <u-link href="#">隐私政策</u-link>
					</view>
				</view>

			</view>
		</div>
		<!-- 提示框 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phoneNo: '',
				username: '',
				password: '',
				showPassword: false,
				remember: true,
				validCode: '',
				list: [{
					name: '用户名'
				}, {
					name: '手机号'
				}],
				current: 0,
				activeColor: '#007aff'
			};
		},
		methods: {
			showPass() {
				this.showPassword = !this.showPassword;
			},
			onClickItem(index) {
				this.current = index;
			},
			nextStep() {
				//验证码登录下一步
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/sys/login/code?phoneNo=' + this.phoneNo
					});
				}, 500);
			},
			showToast(flag) {
				if (flag) {
					this.$refs.uToast.show({
						title: '登录成功',
						type: 'success',
					})
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/sys/workbench/index'
						});
					}, 500);
				} else {
					this.$refs.uToast.show({
						title: '用户名或密码错误',
						type: 'error',
					})
				}
			},
			submit() {
				if (this.username.length == 0) {
					this.$u.toast('请输入账号');
					return;
				}
				if (this.password.length == 0) {
					this.$u.toast('请输入密码');
					return;
				}
				// 登录请求
				this.$u.api.login({
						username: this.username,
						password: this.password,
					})
					.then(res => {
						if (res.code === 200) {
							this.$u.vuex('vuex_token',res.data)
							this.showToast(true)
						} else {
							this.showToast(false)
						}
					});
			},
			wxLogin(res) {
				this.$u.toast('微信登录');
			},
			qqLogin() {
				this.$u.toast('QQ 登录');
			}
		}
	};
</script>

<style lang="scss">
	@import 'index.scss';

	.logo {
		width: 80%;
		font-size: 64rpx;
		color: #5473e8;
		margin: 80rpx auto 80rpx auto;
	}

	.list-call-icon {
		color: #ff0000;
	}

	.register {
		display: inline-block;
		color: #5473e8;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		float: right;
		margin-top: 6rpx;
	}

	.register-link {
		float: right;
		padding: 0 16rpx;
	}

	.reg-link {
		display: inline-block;
		color: #5473e8;
	}

	.oauth2 {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin: 0rpx 100rpx 30rpx;

		image {
			height: 80rpx;
			width: 80rpx;
		}
	}

	.u-tabs {
		padding: 0 70rpx;
	}
</style>
